/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, TextArea, Input, CCell, Table, TableBody, TableRow, TableHead, Cell, useTheme, InputLine,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {RepLink} from "../../common/base";
import {SimpleImg} from "../../../comp/Image";
import Img_Jgd from "../../crane/bridgeDJ/PictureJgd.png";

export const tailZj静刚= <Text css={{"@media print": {fontSize: '0.75rem'}}}>
    注：1、h、h' 为各相应测点的相对标高读数，标尺读数小的一端朝下。<br/>
    2、对于产品标准和设计文件同时对静态刚度、上拱度或上翘度上都有规定的，以较严规定作为检验结果判定依据。对于标准和设计文件都没有规定的，相应的项目可不测量。<br/>
    3、对于C4.4.2.4，以设计文件作为检验结果判定依据时，设计要求值填在备注栏内。<br/>
    4、未检查或无需检验的，仅填检验结果栏。
</Text>;
export const itemA静态刚度=['载标高1','载标高2','额载标1','额载标2','额载变1','额载变2','上拱翘1','上拱翘2','要静刚','要上拱','要静刚r','要上拱r','静刚备注'];
export const Stiffness=
    React.forwardRef(({ children, show ,alone=true,label}:InternalItemProps,  ref
    ) => {
        const theme = useTheme();
        const [getInpFilter]=useMeasureInpFilter(null,itemA静态刚度,);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label!}>
                <Text variant="h5">{label!} 单位：mm</Text>
                <SimpleImg url={Img_Jgd}/>
                测量工况: 空载标高h(静载试验后)：<br/>
                { [['主梁1','载标高1'],['主梁2','载标高2']].map(([title,field], i:number) => {
                    return  <React.Fragment key={i}>
                        空载标高 {'>'} {title} 各测量点：
                        <div css={{display: 'flex',flexWrap: 'wrap',justifyContent:'space-around',alignItems:'center'}}>
                            { [['D','d'],['A','a'],['C','C'],['B','b'],['E','e']].map(([name,tag], f:number) => {
                                return <div key={f} css={{ display: 'flex',alignItems:'center',
                                    minWidth: 'min(30vmin, 7rem)', maxWidth: 'min(35vmin, 13rem)',
                                    [theme.mediaQueries.md]: {minWidth: 'min(30vmin, 11rem)', maxWidth: 'min(40vmin, 19rem)'}
                                }}>
                                    {name}
                                    <Input  value={inp?.[field]?.[tag] ||''}
                                            onChange={e => setInp({ ...inp, [field]:{...inp?.[field], [tag]: e.currentTarget.value||undefined} }) }/>
                                </div>;
                            }) }
                        </div>
                    </React.Fragment>;
                }) }
                { [['额载标高h\'','额载标'],['额载C（D E)点变形量△h','额载变'],['上拱度和上翘度','上拱翘']].map(([title,field], i:number) => {
                    return <React.Fragment key={i}>
                        { [['主梁1','1'],['主梁2','2']].map(([point,suf], g:number) => {
                            return <React.Fragment key={g}>
                                工况:{title} {'>'} {point} 各点：
                                <div css={{display: 'flex',flexWrap: 'wrap',justifyContent:'space-around',alignItems:'center'}}>
                                    { [['D','d'],['C','C'],['E','e']].map(([name,tag], f:number) => {
                                        return <div key={f} css={{ display: 'flex',alignItems:'center',
                                            minWidth: 'min(30vmin, 7rem)', maxWidth: 'min(35vmin, 13rem)',
                                            [theme.mediaQueries.md]: {minWidth: 'min(30vmin, 11rem)', maxWidth: 'min(40vmin, 19rem)'}
                                        }}>
                                            {name}
                                            <Input  value={inp?.[field+suf]?.[tag] ||''}
                                                    onChange={e => setInp({ ...inp, [field+suf]:{...inp?.[field+suf], [tag]: e.currentTarget.value||undefined} }) }/>
                                        </div>;
                                    }) }
                                </div>
                            </React.Fragment>;
                        }) }
                    </React.Fragment>;
                }) }
                { [['C4.3.2.5','要静刚','静刚度要求值'],['C4.4.2.4','要上拱','上拱度和上翘度要求值']].map(([title,field,desc], i:number) => {
                    return <React.Fragment key={i}>
                        {title} {'>'} {desc} 各点：
                        <div css={{display: 'flex',flexWrap: 'wrap',justifyContent:'space-around',alignItems:'center'}}>
                            { [['D','d'],['C','C'],['E','e']].map(([name,tag], f:number) => {
                                return <div key={f} css={{ display: 'flex',alignItems:'center',
                                    minWidth: 'min(30vmin, 7rem)', maxWidth: 'min(35vmin, 13rem)',
                                    [theme.mediaQueries.md]: {minWidth: 'min(30vmin, 11rem)', maxWidth: 'min(40vmin, 19rem)'}
                                }}>
                                    {name}
                                    <Input  value={inp?.[field]?.[tag] ||''}
                                            onChange={e => setInp({ ...inp, [field]:{...inp?.[field], [tag]: e.currentTarget.value||undefined} }) }/>
                                </div>;
                            }) }
                            <InputLine label='检验结果'>
                                <SelectHookfork value={ inp?.[field+'r'] ||''}
                                                onChange={e => setInp({ ...inp, [field+'r']: e.currentTarget.value||undefined}) }/>
                            </InputLine>
                        </div>
                    </React.Fragment>;
                }) }
                备注：
                <TextArea  value={inp?.静刚备注 ||''} rows={6}
                           onChange={e => setInp({ ...inp, 静刚备注: e.currentTarget.value||undefined}) } />
                {children ?? tailZj静刚}
            </InspectRecordLayout>
        );
} );

export const StiffnessVw= ({children, orc, rep,label,} : { orc: any, rep: any,label:any, children?: any,}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: '9rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h4" css={{marginTop: '1rem',}}>{label}</Text>
            <Text css={{display: 'flex',flexDirection: 'row-reverse',marginRight: '2rem'
            }}>单位：mm</Text>
        </div>
        <Table  css={{borderCollapse: 'collapse', "@media print": {marginTop: '-9rem'}}}>
            <TableBody>
                <TableRow>
                    <CCell>
                        <SimpleImg url={Img_Jgd}/>
                    </CCell>
                </TableRow>
            </TableBody>
        </Table>
        <Table id={'Stiffness'}  fixed={["13%","%","12%","12%","12%","12%","12%"]}
                             css={{borderCollapse: 'collapse', }} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell>测量工况</CCell>
                    <CCell>测量点</CCell>
                    <CCell>D</CCell>
                    <CCell>A</CCell>
                    <CCell>C</CCell>
                    <CCell>B</CCell>
                    <CCell>E</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink ori rep={rep} tag={'Stiffness'}>
                    { [['主梁1','载标高1'],['主梁2','载标高2']].map(([title,field], i:number) => {
                        return <TableRow key={i}>
                            {i===0 && <CCell rowSpan={2}>空载标高h(静载试验后)</CCell>}
                            <CCell>{title}</CCell>
                            <CCell>{orc?.[field]?.d}</CCell>
                            <CCell>{orc?.[field]?.a}</CCell>
                            <CCell>{orc?.[field]?.C}</CCell>
                            <CCell>{orc?.[field]?.b}</CCell>
                            <CCell>{orc?.[field]?.e}</CCell>
                        </TableRow>;
                    }) }
                    { [['额载标高h\'','额载标'],['额载C（D E)点变形量△h','额载变'],['上拱度和上翘度','上拱翘']].map(([title,field], i:number) => {
                        return <React.Fragment key={i}>
                                { [['主梁1','1'],['主梁2','2']].map(([point,tag], g:number) => {
                                    return <TableRow key={g}>
                                        {g===0 && <CCell rowSpan={2}>{title}</CCell>}
                                        <CCell>{point}</CCell>
                                        <CCell>{orc?.[field+tag]?.d}</CCell>
                                        <CCell>/</CCell>
                                        <CCell>{orc?.[field+tag]?.C}</CCell>
                                        <CCell>/</CCell>
                                        <CCell>{orc?.[field+tag]?.e}</CCell>
                                    </TableRow>;
                                }) }
                        </React.Fragment>;
                    }) }
                    { [['C4.3.2.5','要静刚','静刚度要求值'],['C4.4.2.4','要上拱','上拱度和上翘度要求值']].map(([title,field,desc], i:number) => {
                        return <React.Fragment key={i}>
                                <TableRow>
                                    <CCell rowSpan={2}>{title}</CCell>
                                    <CCell>{desc}</CCell>
                                    <CCell>{orc?.[field]?.d}</CCell>
                                    <CCell>/</CCell>
                                    <CCell>{orc?.[field]?.C}</CCell>
                                    <CCell>/</CCell>
                                    <CCell>{orc?.[field]?.e}</CCell>
                                </TableRow>
                                <TableRow>
                                    <CCell>检验结果</CCell>
                                    <CCell colSpan={5}>{orc?.[field+'r']}</CCell>
                                </TableRow>
                        </React.Fragment>;
                    }) }
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={["6%","%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink ori rep={rep} tag={'Stiffness'}>
                    <TableRow>
                        <CCell>备注</CCell>
                        <Cell colSpan={7}>
                            <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                                {orc.静刚备注 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        {children ?? tailZj静刚}
    </>;
};
